<template>
	<el-main style="padding: 20px">
		<el-upload class="upload-demo" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
			:http-request="uploadFile" :before-remove="beforeRemove" multiple :limit="3" :file-list="fileList">
			<el-button size="small" type="primary">导入习题(请导入.xlsx文件，编码为utf-8)</el-button>
		</el-upload>
		<div class="table-box">
			<el-table :data="course" style="width: 100%">
				<el-table-column prop="unitId" label="小节ID"></el-table-column>
				<el-table-column prop="name" label="小节"></el-table-column>
				<el-table-column prop="crtDate" label="时间"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="look(scope.row)" type="text" size="mini">查看习题</el-button>
						</el-button>
						<!-- <el-button @click="addWord(scope.row)" type="text" size="mini"
              >组合习题</el-button
            > -->
						<el-button type="text" size="mini" @click="deleteObj(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 组合习题 -->
		<el-dialog :visible.sync="AddtEaxm" width="80%">
			<el-radio-group v-model="radio" style="margin-top: 20px" v-if="typeList">
				<el-radio :label="item.categoryCode" v-for="(item, index) in typeList" :key="index">
					{{ item.categoryName }}</el-radio>
			</el-radio-group>
			<el-table :data="ExamList" style="width: 100%" @selection-change="selectEaxm">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="content" label="题目"></el-table-column>
				<el-table-column prop="type" label="类型（1-选择 2-填空 3-简答 4-判断 5-多选 6-计算 7-论叙 8-操作）"></el-table-column>
			</el-table>
			<el-pagination background layout="prev, pager, next" :page-count="ExamData.pages" :current-page="Examcur"
				@current-change="ExamQie"></el-pagination>
			<div style="text-align: right">
				<el-button type="primary" size="mini" @click="tanchuExam()"> 确认选中 </el-button>
			</div>
		</el-dialog>
		<el-dialog title="请填写分数" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-input v-model="point" placeholder="默认为1分"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="okExam">确 定</el-button>
			</span>
		</el-dialog>
		<el-pagination background layout="prev, pager, next" :page-count="data.pages" :current-page="current"
			@current-change="chaxun"></el-pagination>
	</el-main>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				point: "",
				url: "http://localhost:8082/back/practicestores/importPractice/1",
				content: [],
				AddtEaxm: false,
				ExamList: [],
				ExamData: [],
				radio: 1,
				subjectId: 1,
				page: 1,
				current: 1,
				size: 10,
				fileList: [],
				Examcur: 1,
				examPage: 1,
				examSize: 10,
				typeList: [],
				selectAdd: [],
				dialogVisible: false,
				unitId: '',
				leimuid: '',
				dats: ''
			};
		},
		inject: ["reload"],
		mounted: function() {
			let data = this.$route.query.id;
			let chapid = this.$route.query.chapterId
			this.leimuid = this.$route.query.leimuid
			let datu = this.$route.query.leimuid
			let datn = this.$route.query.classId;
			this.dats = datn ? datn : datu;
			//console.log(data);
			this.content = data;


			// this.getData()
			//获取小节
			this.postJson("/back/chapter/queryPracticeChapterList", {
				pchapterId: data
			}).then((res) => {
				console.log(res)
				for (let i = 0; i < res.data.data.length; i++) {
					if (res.data.data[i].chapterId == chapid) {
						this.course = res.data.data[i].children
						console.log(this.course,"列表数据")
					}
				}
				console.log(this.course,"列表数据")
				// this.$message(res.data.msg);
			});

			this.postRequest("/comm/queryCategoryByType", {
				type: "practice_type"
			}).then(
				(res) => {
					this.typeList = res.data.data;
					this.radio = this.typeList[0].categoryCode;
				}
			);
		},
		watch: {
			// radio() {
			// 	this.page = 1;
			// 	this.getEaxm();
			// },
		},
		methods: {
			handlePreview(file) {
				//console.log(file);
			},
			handleRemove(file, fileList) {
				//console.log(file, fileList);
			},
			//上传
			uploadFile(param) {
				//console.log("开始上传")
				var fileObj = param.file;
				var form = new FormData(); //在创建FormData对象时指定表单的元素  我们需要传的参数
				form.append("file", param.file);
				form.append("shid", this.leimuid)
				this.uploadFileRequest('/back/practicestores/importPractice/1', form).then(res => {
					//console.log(res)
					if (res.data.code == 10000) {
						this.$message({
							type: 'success',
							message: "上传成功"
						})
					}
				})
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${file.name}？`);
			},
			look(val) {
				//console.log(val)
				this.$router.push({
					path: "/tilist?id=" + val.unitId + "&chaperId=" + this.$route.query.chapterId + "&leimuid=" +
						this.dats
				});
			},
			//删除
			deleteObj(val) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.postRequest(`/back/unit/delete?ids=` + val.unitId).then(res => {
						this.reload()
					});
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
				//console.log(val)

			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
			//提交
			tanchuExam() {
				this.postRequest(`/back/practicestores/addPracticeStoreList`).then((res) => {
					//console.log("res", res);
					this.data = res.data.data;
					let arr = res.data.data.content;
					for (let item in arr) {
						//console.log(arr[item]);
						for (let value in arr[item]) {
							//console.log(arr[item][value]);
							let list = arr[item][value];

							this.content.push(arr[item][value]);
						}
					}
					//console.log(this.content);
				});
			},
			selectEaxm(e) {
				//console.log(e);
				this.selectAdd = e;
			},
			getData() {
				this.postRequest(`/back/chapter/getById?chapterId=${this.$route.query.id}`).then(
					(res) => {
						//console.log("res", res);
						this.data = res.data.data;
						let arr = res.data.data.content;
						for (let item in arr) {
							//console.log(arr[item]);
							for (let value in arr[item]) {
								//console.log(arr[item][value]);
								let list = arr[item][value];

								this.content.push(arr[item][value]);
							}
						}
						//console.log(this.content);
					}
				);
			},

			//添加组合体
			addWord(e) {
				//console.log(e);
				this.unitId = e.unitId;
				this.getEaxm();
				(this.examId = e.testId), (this.AddtEaxm = true);
			},
			ExamQie(val) {
				//console.log(val);
				this.examPage = val;
				this.getEaxm();
			},
			tanchuExam() {
				//console.log(this.selectAdd);
				this.dialogVisible = true;
			},
			getEaxm() {
				let params = {
					page: this.examPage,
					size: this.examSize,
					subjectId: this.subjectId,
					type: this.radio,
					typeId: 1,
				};
				this.postRequest(`/back/practicestores/queryPracticeList`, params).then((res) => {
					this.ExamList = res.data.data.list;
					this.ExamData = res.data.data;
					
				});
			},
			okExam() {
				if (this.point == "") {
					this.point = 1;
				}
				let list = [];
				let that = this;
				this.selectAdd.forEach((item) => {
					let obj = {
						psId: item.practiceId,
						point: +that.point,
						type: item.type
					};
					list.push(obj);
				});
				//console.log(list,"传给后台的值");
				let listNew = [];
				this.postJson(`/back/unit/getById`, {
					unitId: this.unitId
				}).then(
					(res) => {
						listNew = res.data.data.content;
						let arr = [];
						for (var item in listNew) {
							arr = arr.concat(listNew[item]);
						}
						//console.log(arr);
						arr.forEach((item) => {
							list.push({
								psId: item.practiceId,
								point: item.point,
								type: item.type
							});
						});
						that
							.postJson(`/back/practicestores/addPracticeStoreList?unitId=${that.unitId}`, list)
							.then((res) => {
								//console.log(res);
								that.reload();
								that.$message(res.data.msg);
							});
					}
				);
				//console.log(list);
			},
		}
	};
</script>
